<template>
	<view class="">
		<cu-navbar><block slot="content">首页</block></cu-navbar>
		<swiper class="screen-swiper" :class="dotStyle ? 'square-dot' : 'round-dot'" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item, index) in swiperList" :key="index" @click="openPage(item)">
				<image :src="item.url" mode="aspectFill"></image>
				<text v-text="item.title"></text>
			</swiper-item>
		</swiper>
		<view class="cu-bar search bg-white">
			<view class="search-form round" @click="openSearch">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="关键字搜索" confirm-type="search" />
			</view>
		</view>
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-hotfill text-mauve"></text>
				热门爆款
			</view>
		</view>
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation>
			<view class="cu-item" v-for="(item, index) in hotlist" :key="index" @click="testDetail(item.id)">
				<image class="radius" :src="item.image" mode="aspectFill"></image>
				<view class="text-cut text-bold" v-text="item.title"></view>
				<view class="text-gray">{{ item.test_num }}人已测</view>
			</view>
		</scroll-view>
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-creativefill text-mauve"></text>
				新上线
			</view>
			<view class="action text-mauve" @click="goclassify">
				更多
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="cu-list menu-avatar">
			<view class="cu-item cur" v-for="(item, index) in list" :key="index" @click="testDetail(item.id)">
				<view class="cu-avatar radius xl" :style="{ backgroundImage: 'url(' + item.image + ')' }"><view class="cu-tag badge" v-if="index < 10"></view></view>
				<view class="content">
					<view>
						<view class="text-cut" v-text="item.title"></view>
						<!-- <view class="cu-tag round bg-mauve sm">6人</view> -->
					</view>
					<view class="text-gray text-sm flex"><view class="text-cut" v-text="item.description"></view></view>
					<view class="flex justify-between">
						<text class="text-lg text-shadow text-mauve">￥{{ item.pay_mode==2?item.price:'免费' }}</text>
						<text class="text-gray text-shadow">{{ item.test_num }}人已测</text>
					</view>
				</view>
				<!-- <view class="action">
					<view class="text-grey text-xs">22:20</view>
					<view class="cuIcon-notice_forbid_fill text-gray"></view>
				</view> -->
			</view>
		</view>
		<cu-back-top ref="backtop" :scrollTop="scrollTop"></cu-back-top>
		<view class="padding"><cu-loadmore v-if="list.length" :status="is_loading ? 'loading' : hasMore ? 'hasmore' : 'nomore'"></cu-loadmore></view>
	</view>
</template>

<script>
import { test } from '@/config/mixins.js';
export default {
	mixins: [test],
	computed: {
		swiperList() {
			return this.vuex_config.shuffling_content || [];
		}
	},
	data() {
		return {
			scrollTop: 0,
			cardCur: 0,
			dotStyle: false,
			towerStart: 0,
			direction: '',
			hotlist: [],
			page: 1,
			list: [],
			status: '',
			is_loading: false,
			hasMore: false
		};
	},
	onLoad() {
		this.gethottest();
		this.gettestlist();
	},
	methods: {
		openSearch() {
			this.$common.navigateTo(this.$ph.search);
		},
		openPage(item) {		
			// #ifdef H5
			if(item.page.includes('http')){
				return window.open(item.page)
			}
			// #endif
			this.$common.navigateTo(item.page);
		},
		gethottest() {
			this.$api.hottest().then(res => {
				uni.stopPullDownRefresh();
				if (res.code) {
					this.hotlist = res.data;
				}
			});
		},
		gettestlist() {
			this.$api
				.testlist({
					page: this.page,
					order: 'createtime desc'
				})
				.then(res => {
					this.is_loading = false;
					uni.stopPullDownRefresh();
					if (res.code) {
						this.hasMore = res.data.current_page < res.data.last_page;
						this.list = this.list.concat(res.data.data);
					}
				});
		},
		goclassify() {
			uni.switchTab({
				url: this.$ph.classify
			});
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.hotlist = [];
		this.list = [];
		this.gethottest();
		this.gettestlist();
	},
	onReachBottom() {
		if (this.hasMore) {
			this.is_loading = true;
			this.page++;
			this.gettestlist();
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>

<style>
page {
	background-color: #f4f6f8;
}
swiper-item text {
	z-index: 100;
	position: absolute;
	left: 10%;
	bottom: 20%;
	color: #ffffff;
}

.nav .cu-item {
	width: 200upx;
	line-height: 25px;
	padding: 20upx 0px;
	margin: 0px 0px 0px 30upx;
	height: auto;
}

.nav .cu-item:last-child {
	margin-right: 30upx;
}

.nav .cu-item image {
	width: 100%;
	height: 190upx;
}

.cu-list.menu-avatar > .cu-item {
	height: 190upx;
}

.cu-list.menu-avatar > .cu-item .content {
	left: 190upx;
	width: calc(100% - 52px - 66px);
}
</style>
